<template>
	<view :style="viewColor">
		<form report-submit='true'>
			<view class='merchantsSettled'>
				<view style="margin: 30rpx 30rpx 0;color: #F55D26;">
					<view class="font-size36-bold">温馨提示</view>
					<view class="font-size32-bold">每位只有2个免费建圈名额，认真填写，随意填写者，将取消永久建圈资格。</view>
				</view>
				<view class='list'>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">人脉圈名称</text>
							<input type="text" maxlength="30" placeholder="请输入人脉圈名称" v-model="circle.title"
							 placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item no-border">
						<view class='acea-row row-middle'>
							<text class="item-title font-size36-500">人脉圈头像</text>
							<view class="upload">
								<view class='pictrue' @click="getPhotoClickIdx('avatar')" v-if="circle.avatar">
									<image :src='circle.avatar'></image>
									<text class='iconfont icon-guanbi1' @click.stop='DelPic("avatar")'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic("avatar")' v-if="!circle.avatar">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db acea-row row-middle">
									<text class="item-name font-size36-500">人脉圈标签</text>
									<input placeholder="请选择人脉圈标签" type="text" disabled readonly v-model="mer_storeType" @click="is_label_search_popup = true">
									<view v-if="mer_storeType" @tap.stop="mer_storeType=''" class="iconfont icon-guanbi2"></view>
									<view class='iconfont icon-jiantou' @click="is_label_search_popup = true"></view>
									
									<!-- <picker @change="bindPickerChange1" @columnchange="bindPickerChange2" mode="multiSelector" :value="multiIndex" :range="multiArray" range-key="label_name">
										<input placeholder="请选择人脉圈标签" type="text" disabled readonly v-model="mer_storeType">
										<view v-if="mer_storeType" @tap.stop="mer_storeType=''" class="iconfont icon-guanbi2"></view>
										<view class='iconfont icon-jiantou'></view>
									</picker> -->
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle" style="display: block;">
							<text class="item-name font-size36-500">人脉圈描述</text>
							<textarea placeholder="请输入人脉圈描述" v-model="circle.description" style="margin-top: 20rpx;"/>
						</view>
						<view class="input_photo acea-row row-middle">
							<view class="circle_picture" v-for="(item, index) in circle.pics" :key="index"  style="width: 180rpx;height: 180rpx;">
								<easy-loadimage mode="widthFix" :image-src="item"></easy-loadimage>
								<view class="close_btn" @click="DelPic('pics', index)"><text class="iconfont icon-guanbi4"></text></view>
							</view>
							<view  class=" acea-row row-center-wrapper row-column add" @click.stop="uploadpic('pics')">
								<view>
									<image src="https://img.jukee.net/def/2948020231017202608569.jpg" style="width: 180rpx;height: 180rpx;" />
								</view>
							</view>
						</view>
					</view>
					
					<!-- <view class='item acea-row row-between-wrapper'>
						<view class='name'>所在地区</view>
						<view class="region">
							<view class="region_count" @click="changeRegion">
								<text v-if="!addressInfo.length" style="color:#cdcdcd;">请选择地址</text>
								<text v-else>{{addressText}}</text>
								<text class="iconfont icon-xiangyou"></text>
								</view>
						</view>
					</view> -->
					<!-- <view class='item acea-row row-between-wrapper'>
						<view class='name'>人脉圈地址</view>
						<input type='text' class="location-input" placeholder='请选择定位' name='detail' placeholder-class='placeholder' disabled :value="circle.province + circle.city + circle.district + circle.address"></input>
						<view class="location" @click="goMap">
							<text class="iconfont icon-chakanditu"></text>
							<br>
							定位
						</view>
					</view> -->
					
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">人脉圈收费</text>
							<radio-group class="radio-flex" @change="bindRadioChange1">
								<view><radio name="pay_type" value="0" :checked="circle.pay_type == 0" color="#FFE103"></radio>免费</view>
								<view><radio name="pay_type" value="1" :checked="circle.pay_type == 1" color="#FFE103"></radio>付费</view>
							</radio-group>
						</view>
					</view>
					<view class="item" v-if="circle.pay_type == 1">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">入圈价格</text>
							<input type="number" placeholder="请输入入圈价格" min="0" v-model="circle.price" placeholder-class='placeholder' />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">人脉圈广告位</text>
							<radio-group class="radio-flex" @change="bindRadioChange2">
								<view><radio name="is_advertisement" value="0" :checked="circle.is_advertisement == 0" color="#FFE103"></radio>关闭</view>
								<view><radio name="is_advertisement" value="1" :checked="circle.is_advertisement == 1" color="#FFE103"></radio>开启</view>
							</radio-group>
						</view>
					</view>
					<view class="item" v-if="circle.is_advertisement == 1">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">广告位1天/元</text>
							<input type="number" data-key="0" placeholder="请输入人脉圈广告位每天多少元" min="0" v-model="circle.advertisement[0].price" placeholder-class='placeholder' style="width: auto;" />
						</view>
					</view>
					<view class="item" v-if="circle.is_advertisement == 1">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">广告位1月/元</text>
							<input type="number" data-key="1" placeholder="请输入人脉圈广告位每月多少元" min="0" v-model="circle.advertisement[1].price" placeholder-class='placeholder' style="width: auto;" />
						</view>
					</view>
					<view class="item" v-if="circle.is_advertisement == 1">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">广告位1季/元</text>
							<input type="number" data-key="2" placeholder="请输入人脉圈广告位每季多少元" min="0" v-model="circle.advertisement[2].price" placeholder-class='placeholder' style="width: auto;" />
						</view>
					</view>
					<view class="item" v-if="circle.is_advertisement == 1">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500">广告位1年/元</text>
							<input type="number" data-key="3" placeholder="请输入人脉圈广告位每年多少元" min="0" v-model="circle.advertisement[3].price" placeholder-class='placeholder' style="width: auto;" />
						</view>
					</view>
					<view class="item">
						<view class="acea-row row-middle">
							<text class="item-name font-size36-500" style="white-space: nowrap;">批量添加圈友</text>
							<view class="check_users" style="flex: 1" @click="checkAddUser">
								<view style="margin-left: auto;"></view>
								{{circle_users.length ? '已选择自动加入人脉圈'+circle_users.length+'用户' : ''}}
								<view class='iconfont icon-jiantou'></view>
							</view>
						</view>
					</view>
					
					<view class="item no-border">
						<view class='acea-row row-middle'>
							<text class="item-title font-size36-500">微信群二维码</text>
							<view class="upload">
								<view class='pictrue' @click="getPhotoClickIdx('qr_code')" v-if="circle.qr_code">
									<image :src='circle.qr_code'></image>
									<text class='iconfont icon-guanbi1' @click.stop='DelPic("qr_code")'></text>
								</view>
								<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic("qr_code")' v-if="!circle.qr_code">
									<text class='iconfont icon-icon25201'></text>
									<view>上传图片</view>
								</view>
							</view>
						</view>
					</view>
					<button class='submitBtn on' @click="formSubmit">提交申请</button>
				</view>
			</view>
		</form>
		<!-- <areaWindow ref="areaWindow" :display="display" :address="addressInfo"
			 @submit="OnChangeAddress" @changeClose="changeClose"></areaWindow> -->
		<view class='loadingicon acea-row row-center-wrapper' v-if="loading">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
		</view>
		<view class="label_list" v-if="is_user_recommend_popup">
			<view class="label_list_content">
				<view class="label_list_title">
					<view>选择用户</view>
					<view class="close_icon" @click="is_user_recommend_popup = false"><image :src="domain + '/uploads/default/20230724/9092d0340bc3c764dabbe0fa4f350ffa.png'"></view>
				</view>
				<view class="con-box">
					<view class='aside'>
						<scroll-view scroll-y="true" style="height: 100%; overflow: hidden;">
							<view v-for="(item,index) in labelList" :key="item.category_id">
								<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""' @click='getChangeLabel(index)'><text class="item_text">{{item.label_name}}</text>
								 </view>
							</view>
						</scroll-view>
					</view>
					<scroll-view scroll-y="true" class="label_list_data" @scrolltolower="getRecommendUserBottom">
						<view class="label_list_user">
							<view class="list_user_item" v-for="(item, index) in userRecommendPopupList" :key="index" @click="selectUser(item)">
								 <!-- :class="circle_users.includes(item.uid) ? 'list_user_item_on' : ''" -->
								<view class='circle_checked' color="#FEAD00">
									<image src="https://img.jukee.net/def/d69c3202310051804241617.png" v-if="circle_users.includes(item.uid)" />
									<image src="https://img.jukee.net/def/a6d9c20231005180425628.png" v-else />
								</view>
								<view class="list_user_avatar"><img :src="item.avatar ? item.avatar : '/static/images/f.png'" /></view>
								<view class="list_user_nickname ">{{item.nickname}}</view>
								<view class="list_user_label ">{{item.label[0]}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<labelSearchListPopup :setLabelList="setLabelList" :multiIndex="multiIndex" :is_label_search_popup='is_label_search_popup' @closeLabelSearchPopup="closeLabelSearchPopup" @changeMultiIndex="changeMultiIndex" @selectLabelSearchPopup="selectLabelSearchPopup"></labelSearchListPopup>
	</view>
</template>
<script>
	import {
		getLabelList,
		getCityList
	} from '@/api/api.js'
	import {
		editCircle,
		getUserCircle,
	} from "@/api/circle";
	import {
		recommendCustom,
		userHasReward
	} from "@/api/user";
	import { getGeocoder } from '@/api/store.js';
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import parser from "@/components/jyf-parser/jyf-parser";
	import authorize from '@/components/Authorize';
	import labelSearchListPopup from '@/components/labelSearchListPopup/index.vue';
	import areaWindow from '@/components/areaWindow';
	import userListPopup from "@/components/userListPopup/index.vue";
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			areaWindow,
			"jyf-parser": parser,
			authorize,
			userListPopup,
			labelSearchListPopup
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				disabled: false,
				loading: false,
				validate: true,
				index: 0,
				mer_storeType: '',
				id: 0,
				circle:{
					title: '',
					avatar: '',
					label_id: 0,
					label_id2: 0,
					description: '',
					pics: [],
					/* province: '',
					city: '',
					district: '',
					address: '',
					lat: '',
					lng: '', */
					pay_type: 0,
					price: 0,
					qr_code: '',
					is_advertisement: 0,
					advertisement: [
						{
							name: '投放1天',
							price: 0,
							day:1,
						},
						{
							name: '投放1月',
							price: 0,
							day:30,
						},
						{
							name: '投放1季',
							price: 0,
							day:90
						},
						{
							name: '投放1年',
							price: 0,
							day:365
						}
					]
				},
				advertisement_template: [
					{
						name: '投放1天',
						price: 0,
						day:1,
					},
					{
						name: '投放1月',
						price: 0,
						day:30,
					},
					{
						name: '投放1季',
						price: 0,
						day:90
					},
					{
						name: '投放1年',
						price: 0,
						day:365
					}
				],
				labelList: [],
				navActive: 0,
				setLabelList: [{
					label_name: '',
					label_id: ''
				}],
				setLabelChildrenList: [],
				index1: 0,
				display: false,
				addressInfo:[],
				multiArray:[],
				multiIndex:[0, 0],
				is_user_recommend_popup: false,
				userRecommendPopupList: [],
				page: 1,
				limit: 99,
				circle_users: [],
				is_label_search_popup: false,
			};
		},
		beforeDestroy() {
		},
		computed: {...configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor'])),
			addressText(){
				return this.addressInfo.map(v=>v.name).join('/');
			}
		},
		onLoad(options) {
			if (this.isLogin) {
				if(options.id) {
					this.id = options.id
					this.gitCircleInfo(options.id);
					uni.setNavigationBarTitle({
						title: '编辑人脉圈'
					})
				}else{
					
				}
				this.getLabel();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {},
		methods: {
			changeRegion(){
				this.display = true;
			},
			OnChangeAddress(address){
				this.addressInfo = address;
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.display = false;
			},
			closeUserRecommendPopup() {
				this.is_user_recommend_popup = false;
			},
			getChangeLabel(index) {
				this.navActive = index;
				this.page = 1;
				this.userRecommendPopupList = [];
				this.getRecommendUserList();
			},
			getRecommendUserBottom() {
				console.log(this.page)
				this.page++;
				this.getRecommendUserList()
			},
			// 意向客户
			getRecommendUserList() {
				let that = this;
				let data = {
					page: that.page, 
					limit: that.limit, 
					is_virtually: 1,
					tabId: that.labelList[that.navActive].label_id
				}
				recommendCustom(data).then(res=>{
					that.userRecommendPopupList = that.userRecommendPopupList.concat(res.data.list);
					that.$set(that, 'userRecommendPopupList', that.userRecommendPopupList)
				}).catch(err=>{
				})
			},
			selectUser(user) {
				let circle_users = this.circle_users;
				if(circle_users.includes(user.uid)) {
					let index = circle_users.indexOf(user.uid);
					this.circle_users.splice(index, 1)
				} else {
					circle_users.push(user.uid)
					this.$set(this, 'circle_users', circle_users);
				}
			},
			// 点击调起地图选择位置
			goMap() {
				let that = this,
					circle = this.circle;
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.chooseLocation({
							success: function (res) {
								 let latitude = res.latitude,
									longitude = res.longitude,
									address = res.name;
								 getGeocoder({
								 	lat: latitude,
								 	long: longitude
								 }).then(res => {
									// let circle = {
									//  	province: res.data.address_component.province,
									//  	city: res.data.address_component.city,
									//  	district: res.data.address_component.district,
									//  	address,
									//  	lat: latitude,
									//  	lng: longitude
									// };
									circle.province = res.data.address_component.province;
									circle.city = res.data.address_component.city;
									circle.district = res.data.address_component.district;
									circle.address = address;
									circle.lat = latitude;
									circle.lng = longitude;
									that.circle = circle;
									that.$set(that, 'circle', that.circle);
								 }).catch(e=>{
									uni.showToast({
										title: '定位失败，请手动输入地址2',
										icon: 'none',
										duration: 1000
									});
								 })
							 }
						});
					},
					fail(err) {
				
					}
				})
			},
			/**
			 * 获取人脉圈信息
			 */
			gitCircleInfo: function(id) {
				let that = this;
				getUserCircle(id, {is_edit: 1}).then(res => {
					let circle = {
						id: res.data.id,
						title: res.data.title,
						description: res.data.description,
						avatar: res.data.avatar,
						label_id: res.data.label_id,
						label_id2: res.data.label_id2,
						pics: res.data.pics,
						/* province: res.data.province,
						city: res.data.city,
						district: res.data.district,
						address: res.data.address,
						lat: res.data.lat,
						lng: res.data.lng, */
						pay_type: res.data.pay_type,
						price: res.data.price,
						qr_code: res.data.qr_code,
						is_advertisement: res.data.is_advertisement,
						advertisement: res.data.advertisement.length ? res.data.advertisement : that.advertisement_template
					}
					that.circle = circle;
					that.$set(that, 'circle', that.circle);
					that.circle_users = res.data.circle_users || [];
					that.$set(that, 'circle_users', res.data.circle_users);
					that.mer_storeType = res.data.label.list[0].label_name + (res.data.label.list[1] ? '-'+res.data.label.list[1].label_name : '');
				});
			},
			/**
			 * 获取行业列表
			 */
			getLabel() {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					is_sort = true;
				getLabelList({customerIndustry, engagedIndustry, is_sort}).then(res=>{
					that.labelList = res.data.list;
					that.setLabelList = res.data.list;
					that.$set(that, 'setLabelChildrenList',  res.data.list[that.multiIndex[0]].children || []);
					that.multiArray = [res.data.list, res.data.list[that.multiIndex[0]].children || []]
					that.$set(that, 'multiArray', that.multiArray)
					that.getRecommendUserList();
				}).catch(err=>{
					console.log('err', err);
				})
			},
			// 关闭搜索标签
			closeLabelSearchPopup() {
				this.is_label_search_popup = false;
				this.mer_storeType = this.setLabelList[this.multiIndex[0]].label_name + (this.setLabelList[this.multiIndex[0]].children ? '-' + this.setLabelList[this.multiIndex[0]].children[this.multiIndex[1]].label_name : '');
				this.circle.label_id = this.setLabelList[this.multiIndex[0]].label_id;
				this.circle.label_id2 = this.setLabelList[this.multiIndex[0]].children ? this.setLabelList[this.multiIndex[0]].children[this.multiIndex[1]].label_id : 0;
			},
			// 选择便签发送改变时触发
			changeMultiIndex(multiIndex) {
				this.$set(this, 'multiIndex', multiIndex);
			},
			// 搜索标签弹窗
			async selectLabelSearchPopup(keywords) {
				let that = this;
				if(!keywords) {
					that.$set(that, 'setLabelList', labelList);
				}else{
					let setLabelList = [];
					that.labelList.forEach((item) => {
						if(item.label_name.includes(keywords)) {
							setLabelList.push(item);
						}else{
							if(item.children && item.children.length) {
								let children = [];
								item.children.forEach((item2) => {
									if(item2.label_name.includes(keywords)) {
										children.push(item2);
									}
								})
								if(children.length) {
									item.children = children;
									setLabelList.push(item);
								}
							}
						}
						
					})
					if(setLabelList.length) {
						that.$set(that, 'setLabelList', setLabelList);
					}else{
						return that.$util.Tips({title: '暂无该搜索项'})
					}
				}
				this.$set(this, 'multiIndex', [0,0]);
			},
			/* bindPickerChange1: function(e) {
				// console.log(666666, e);
				// this.index1 = e.target.value
				// let idx = e.target.value
				this.circle.label_id = this.setLabelList[e.detail.value[0]].label_id;
				this.circle.label_id2 = this.setLabelList[e.detail.value[0]].children ? this.setLabelList[e.detail.value[0]].children[e.detail.value[1]].label_id : 0;
				this.$set(this, 'circle', this.circle);
				this.mer_storeType = this.setLabelList[e.detail.value[0]].label_name + (this.setLabelList[e.detail.value[0]].children ? '-' + this.setLabelList[e.detail.value[0]].children[e.detail.value[1]].label_name : '')
			},
			bindPickerChange2: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					setLabelList = this.setLabelList;
				if(column == 0)
				{
					that.multiIndex[0] = value;
					that.multiIndex[1] = 0;
					that.multiArray[1] = setLabelList[value].children || [];
					that.$set(that, 'multiArray', that.multiArray);
					that.$set(that, 'multiIndex', that.multiIndex);
				}else if(column == 1)
				{
					that.multiIndex[1] = value;
					that.$set(that, 'multiIndex', that.multiIndex);
				}
				that.$forceUpdate();
			}, */
			bindRadioChange1(e) {
				this.circle.pay_type = e.detail.value;
				this.$set(this, 'circle', this.circle);
			},
			bindRadioChange2(e) {
				this.circle.is_advertisement = e.detail.value;
				this.$set(this, 'circle', this.circle);
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(type) {
				console.log('type', type)
				let _this = this,
					img = '';
				if(type == 'avatar'){
					img = _this.circle.avatar;
				}else if(type == 'qr_code'){
					img = _this.circle.qr_code;
				}
				_this.imgPreview(img)
			},
			// 图片预览
			imgPreview: function(img) {
				console.log('img', img)
				// list：图片 url 数组
				if (img) {
					uni.previewImage({
						// current: 0, //  传 Number H5端出现不兼容
						urls: [img]
					});
				}
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			toggleTab(str) {
				this.$refs[str].show();
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function(type) {
				let that = this;
				// if(that.pics.length >= 3){
				// 	return that.$util.Tips({title: '最多上传3张图片'});
				// }
				that.$util.uploadImageOne('upload/image', function(res) {
					if(type == 'pics') {
						that.circle.pics.push(res.data.path);
					}else if(type == 'avatar') {
						that.circle.avatar = res.data.path;
					}else if(type == 'qr_code') {
						that.circle.qr_code = res.data.path;
					}
					that.$set(that, 'circle', that.circle);
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPic: function(type, index = 0) {
				let that = this,
					circle = this.circle;
				if (type == 'pics') {
					that.circle.pics.splice(index, 1);
				} else if(type == 'avatar') {
					circle.avatar = '';
					that.circle = circle;
					that.$set(that, 'circle', circle);
				}else if(type == 'qr_code') {
					circle.qr_code = '';
					that.circle = circle;
					that.$set(that, 'circle', circle);
				}
				
			},
			formSubmit: function(e) {
				let that = this;
				// if(！that.id && that.circle_users.length < 20) return that.$util.Tips({title: '请至少选择20个用户'});
				if (that.validateForm() && that.validate) {
					let circle = this.circle;
					circle.circle_users = that.circle_users
					that.validate = false;
					editCircle({...circle}).then(res => {
						that.validate = true;
						if (res.status == 200) {
							that.$util.Tips({
								title: res.message
							}, {
								tab: 2,
								url: '/pages/extends/circle_create/list?type=2'
							});
						}
					}).catch(res => {
						that.validate = true;
						that.$util.Tips({
							title: res
						});
					})
				}
			},
			validateBtn: function() {
				let that = this,
					value = that.circle;
				if (value.title && value.avatar && value.label_id && value.address) {
					that.validate = true;
				}else{
					that.validate = false;
				}
			},
			validateForm: function() {
				let that = this,
					value = that.circle;
				if (!value.title) return that.$util.Tips({
					title: '请输入人脉圈名称'
				});
				if (!value.avatar) return that.$util.Tips({
					title: '请上传人脉圈头像'
				});
				if (!value.label_id) return that.$util.Tips({
					title: '请选择人脉圈标签'
				});
				// if (!value.province || !value.city || !value.district || !value.address || !value.lat || !value.lng) return that.$util.Tips({
				// 	title: '请重新定位人脉圈地址'
				// });
				if (value.pay_type == 1 && parseFloat(value.price) <= 0) return that.$util.Tips({
					title: '付费人脉圈价格必须大于0'
				});
				/* if (!value.qr_code) return that.$util.Tips({
					title: '请上传人脉圈二维码'
				}); */
				/* if (!value.id && (!that.circle_users || !that.circle_users.length)) return that.$util.Tips({
					title: '请选择人脉圈虚拟用户'
				}); */
				return true;
			},
			selfLocation() {
				let self = this
				uni.showLoading({
					title: '定位中',
					mask: true,
				});
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						self.latitude = res.latitude
						self.longitude = res.longitude
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							const data = res.data;
							getCityList(data.address_component.province+'/'+data.address_component.city+'/'+data.address_component.district+'/'+(!data.address_reference.town ? '' : data.address_reference.town.title)).then(res=>{
								self.addressInfo = res.data;
								self.$set(self.userAddress, 'detail', data.formatted_addresses.recommend);
								uni.hideLoading();
							}).catch(e=>{
								uni.hideLoading();
								uni.showToast({
									title: '定位失败，请手动输入地址1',
									icon: 'none',
									duration: 1000
								});
							})
						}).catch(e=>{
							uni.hideLoading();
							uni.showToast({
								title: '定位失败，请手动输入地址2',
								icon: 'none',
								duration: 1000
							});
						})
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			handlePriceChange(e, k) {
				console.log(e)
			    let value = e.detail.value
			    // 将用户输入的值转化成number类型
			    value = parseFloat(value)
			    if (isNaN(value)) {
			      value = 0
			    }
			    // 最多保留两位小数
			    value = value.toFixed(2)
			    // 将处理后的数值重新赋值给input组件
			    return value
			  },
			checkAddUser(){
				let that = this;
				userHasReward({type: 'is_svip'}).then(res=>{
					if(res.data.status == 1) {
						that.is_user_recommend_popup = 1;
					} else {
						uni.showModal({
						  title: '成为VIP会员', // 标题
						  content: '可拉平台内2000精准用户进圈(更多权益请在我的会员中心查看)', // 内容
						  success(res) {
						    if (res.confirm) {
						      that.$util.Tips('/pages/annex/vip_paid/index');
						      // 这里写取消操作的相关代码
						    }
						  }
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #FADC00!important;
	}
	::v-deepcheckbox .uni-checkbox-input.uni-checkbox-input-checked,
	::v-deepcheckbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid var(--view-theme)!important;
	  background-color: var(--view-theme)!important;
	  color: #fff!important;
	}
	.uni-input-placeholder {
		color: #B2B2B2;
	}
	.item-name{
		width: 190rpx;
	}
	.uni-list-cell {
		position: relative;
		.iconfont {
			font-size: 14px;
			color: #7a7a7a;
			position: absolute;
			right: 15px;
			top: 7rpx;
		}
		.icon-guanbi2{
			right: 35px;
		}
	}
	.merchantBgCount{
		line-height: 0;
	}
	.merchantsSettled .merchantBg {
		width: 750rpx;
		width: 100%;
	}
	.merchantsSettled .list {
		background-color: #fff;
		border-radius: 12px;
		padding: 22px 0;
		margin: 0 15px;
		position: relative;
		top: 30rpx;
		width: calc(100% - 30px);
		
	}
	.application-record {
		position: absolute;
		display: flex;
		align-items: center;
		top: 240rpx;
		right: 0;
		color: #fff;
		font-size: 22rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 8rpx 18rpx;
		border-radius: 20px 0px 0px 20px;
	}
	.merchantsSettled .list .item {
		padding: 50rpx 0 20rpx;
		border-bottom: 1px solid #eee;
		position: relative;
		margin: 0 20px;
		&.no-border {
			border-bottom: none;
			padding-left: 0;
			padding-right: 0;
		}
		.item-title {
			// color: #666666;
			// font-size: 28rpx;
			display: block;
		}
		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}
	.acea-row,.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.upload {
		margin-left: 30rpx;
		// margin-left: auto;
	}
	.acea-row.row-middle {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding-left: 2px;
	}
	.acea-row.row-column {
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-o-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.merchantsSettled .list .item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}
		uni-image,
		image {
			width: 100%;
			height: 100%;
			border-radius: 1px;
			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}
		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}
	.uni-list-cell-db{
		position: relative;
	}
	.wenhao{
		width: 34rpx;
		height: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-radius: 50%;
		background: #E3E3E3;
		color: #ffffff!important;
		margin-left: 4rpx;
		position: absolute;
		left: 122rpx;
	}
	.merchantsSettled .list .item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}
	.merchantsSettled .list .item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}
	.merchantsSettled .list .item input, .merchantsSettled .list .item textarea {
		width: 400rpx;
		font-size: 30rpx;
	}
	.merchantsSettled .list .item textarea {
		width: 100%;
		height: 200rpx;
	}
	.merchantsSettled .list .item .placeholder {
		color: #b2b2b2;
	}
	.merchantsSettled .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
		margin-top: 23rpx;
	}
	.merchantsSettled .default checkbox {
		margin-right: 15rpx;
	}
	.merchantsSettled .acea-row uni-image {
		width: 20px;
		height: 20px;
		display: block;
	}
	.merchantsSettled .list .item .codeIput {
		width: 125px;
	}
	.uni-input-input {
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}
	.merchantsSettled .list .item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid var(--view-theme);
		border-radius: 15px;
		color: var(--view-theme);
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}
	.merchantsSettled .list .item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}
	.merchantsSettled .submitBtn {
		width: 588rpx;
		margin: 0 auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #fff;
		background: #E3E3E3;
		margin-top: 25px;
		pointer-events: none;
		font-size: 32rpx;
		font-weight: 500;
		color: #1C211D;
	}
	.merchantsSettled .submitBtn.on {
		background: var(--view-theme);
			pointer-events: all;
	}
	uni-checkbox-group,
	.settleAgree {
		display: inline-block;
		font-size: 24rpx;
	}
	uni-checkbox-group {
		color: #b2b2b2;
	}
	.settleAgree {
		color: var(--view-theme);
		position: relative;
		top: 2px;
		left: 8px;
	}
	.merchantsSettled uni-checkbox .uni-checkbox-wrapper {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #C3C3C3;
		border-radius: 15px;
	}
	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}
	.settlementAgreement .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
		.content {
			height: 900rpx;
			overflow-y: scroll;
			::v-deep p {
				font-size: 13px;
				line-height: 22px;
			}
			::v-deep img {
				max-width: 100%;
			}
		}
	}
	.settlementAgreement .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}
	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
	.settlementAgreement .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
	.settledSuccessMain {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}
	.settledSuccessful {
		flex: 1;
		width: 100%;
		padding: 0 56px;
		height: auto;
		background: #fff;
		text-align: center;
	}
	.settledSuccessful .image {
		width: 189px;
		height: 157px;
		margin-top: 66px;
	}
	.settledSuccessful .title {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		margin-top: 35px;
	}
	.settledSuccessful .info {
		color: #A0A0A0;
		font-size: 13px;
		margin-top: 12px;
	}
	.settledSuccessful .goHome {
		margin: 60px auto 0;
		line-height: 43px;
		color: #282828;
		font-size: 15px;
		border: 1px solid #B4B4B4;
		border-radius: 60px;
	}
	::v-deep uni-checkbox .uni-checkbox-input {
		width: 15px;
		height: 15px;
		position: relative;
	}
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		font-size: 14px;
	}
	.loadingicon {
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	.icon-xiangyou {
		font-size: 22rpx;
	}
	.radio-flex {
		flex: 1;
		display: flex;
		justify-content: space-around;
	}
	.location {
		text-align: center;
	}
	// #ifdef MP
	checkbox-group {
		display: inline-block;
	}
	// #endif
	.setAgCount{
		::v-deep table{
			border:  1px solid #DDD;
			border-bottom: none;
			border-right: none;
		}
		::v-deep td, th {
		    padding: 5rpx 10rpx;
		    border-bottom: 1px solid #DDD;
			border-right:  1px solid #DDD;
		}
	}
	.check_user {
		display: flex;
		align-items: center;
		margin-left: auto;
	}
	
	.label_list {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 1000;
		.label_list_content {
			width: 100%;
			height: 80vh;
			position: absolute;
			bottom: 0;
			border-radius: 30rpx 30rpx 0 0;
			padding: 0 30rpx 30rpx;
			overflow-y: auto;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			.label_list_title {
				display: flex;
				flex-direction: initial;
				font-size: 36rpx;
				font-weight: bold;
				justify-items: center;
				justify-content: space-between;
				margin: 0rpx 0 20rpx;
				position: sticky;
				top: 0;
				background-color: #fff;
				padding-top: 30rpx;
				z-index: 1;
				.label_list_close {
					font-size: 46rpx;
				}
				.close_icon {
					width: 30rpx;
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.con-box {
				display: flex;
				flex: 1;
				overflow: hidden;
				.aside {
					overflow-y: auto;
					overflow-x: hidden;
					border-right: 1px solid #EEEEEE;
					width: 160rpx;
					height: 100%;
				}
				.aside .item {
					line-height: 100rpx;
					width: 100%;
					font-size: 30rpx;
					color: #666666;
				}
				.aside .item_text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.aside .item.on {
					width: 100%;
					text-align: center;
					font-weight: bold;
					color: #333333;
				}
			}
			.label_list_data {
				height: 100%;
				overflow: hidden;
				flex: 1;
				.label_list_user {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 20rpx;
					font-size: 30rpx;
				}
				.list_user_item {
					background: #FFFFFF;
					box-shadow: 0rpx 10rpx 28rpx 0rpx rgba(141,138,127,0.1);
					border-radius: 8rpx;
					padding: 10rpx;
					text-align: center;
					overflow: hidden;
					position: relative;
					.circle_checked {
						position: absolute;
						width: 50rpx;
						height: 50rpx;
						top: 10rpx;
						right: 10rpx;
						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
					.list_user_avatar {
						width: 98rpx;
						height: 98rpx;
						border-radius: 50%;
						margin: 0 auto;
						image {
							width: 98rpx;
							height: 98rpx;
							border-radius: 50%;
						}
					}
					.list_user_nickname {
						font-size: 30rpx;
						font-weight: 500;
						color: #37393A;
						line-height: 42rpx;
						margin-top: 28rpx;
						overflow: hidden;
						white-space: nowrap;
					}
					.list_user_label {
						font-size: 24rpx;
						font-weight: 400;
						color: #767676;
						line-height: 34rpx;
						margin-top: 6rpx;
						overflow: hidden;
						white-space: nowrap;
					}
				}
				.list_user_item_on {
					background-color: #FFE103;
				}
			}
		}
	}
	.check_users {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		margin-left: auto;
	}
	.circle_picture {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx !important;
		margin-right: 11rpx;
		position: relative;
		overflow: hidden;
	}
	::v-deep.input_photo .easy-loadimage,::v-deep.input_photo uni-image,::v-deep.input_photo image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
	}
	.close_btn{
		width: 30rpx;
		height: 30rpx;
		background: rgba(0,0,0,.6);
		border-radius: 0 12rpx 0 12rpx;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		.iconfont{
			color: #ffffff;
			font-size: 12rpx;
		}
	}
</style>
